/**
 * Creates the base structure of trigger field.
 * @member Ext.form.field.Trigger
 */
@mixin extjs-form-triggerfield {
  .#{$prefix}form-trigger-wrap {
    vertical-align: top;
  }

  .#{$prefix}form-trigger {
    background-image: theme-background-image($theme-name, 'form/trigger.gif');
    background-position: 0 0;

    width: $form-trigger-width;
    height: $form-trigger-height - $form-trigger-border-bottom-width;

    border-bottom: $form-trigger-border-bottom;

    cursor: pointer;
    cursor: hand;
    overflow: hidden;
  }

  .#{$prefix}border-box .#{$prefix}form-trigger {
    height: $form-trigger-height;
  }

  .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
    height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width;
  }

  .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
    height: $form-toolbar-trigger-height;
  }


  .#{$prefix}form-trigger-over {
    background-position: -$form-trigger-width 0;

    border-bottom-color: $form-trigger-border-bottom-color-over;
  }

  .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger {
    background-position: -($form-trigger-width * 3) 0;

    border-bottom-color: $form-trigger-border-bottom-color-focus;
  }

  .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over {
    background-position: -($form-trigger-width * 4) 0;

    @if $form-trigger-border-bottom-color-focus-over {
      border-bottom-color: $form-trigger-border-bottom-color-focus-over;
    }
  }

  .#{$prefix}form-trigger-click,
  .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click {
    background-position: -($form-trigger-width * 2) 0;

    @if $form-trigger-border-bottom-color-pressed {
      border-bottom-color: $form-trigger-border-bottom-color-pressed;
    }
  }

  .#{$prefix}form-trigger-icon {
    height: $form-trigger-width - $form-trigger-border-bottom-width;

    background-repeat: no-repeat;
    background-position: $form-trigger-icon-background-position;
  }

  .#{$prefix}pickerfield-open {
    .#{$prefix}form-field {
      @include border-bottom-radius(0);
    }
  }

  .#{$prefix}pickerfield-open-above {
    .#{$prefix}form-field {
      @include border-bottom-left-radius(3px);
      @include border-top-radius(0);
    }
  }

  .#{$prefix}form-arrow-trigger {
    .#{$prefix}form-trigger-icon {
      background-image: theme-background-image($theme-name, 'boundlist/trigger-arrow.png');
    }
  }

  .#{$prefix}form-date-trigger {
    background-image: theme-background-image($theme-name, 'form/date-trigger.gif');
  }

  $spinner-btn-height: $form-trigger-height / 2;
  .#{$prefix}form-trigger-wrap {
    .#{$prefix}form-spinner-up,
    .#{$prefix}form-spinner-down {
      background-image: theme-background-image($theme-name, 'form/spinner.gif');

      width: $form-trigger-width !important;
      height: $spinner-btn-height !important;

      font-size: 0; /*for IE*/

      border-bottom: 0;
    }

    .#{$prefix}form-spinner-down {
      background-position: 0 (-$spinner-btn-height);
    }
  }
  .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
    background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
  }
  .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
    background-position: (-$form-trigger-width) (-$spinner-btn-height);
  }
  .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
    background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
  }
  .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
    background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
  }


  .#{$prefix}field-default-toolbar {
    $spinner-btn-height: $form-toolbar-trigger-height / 2;

    .#{$prefix}form-trigger-wrap {
      .#{$prefix}form-spinner-up,
      .#{$prefix}form-spinner-down {
        background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
        height: $spinner-btn-height !important;
      }

      .#{$prefix}form-spinner-down {
        background-position: 0 (-$spinner-btn-height);
      }
    }

    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
      background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
    }

    .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
      background-position: (-$form-trigger-width) (-$spinner-btn-height);
    }

    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
      background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
    }

    .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
      background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
    }
  }


  .#{$prefix}trigger-noedit {
    cursor: pointer;
    cursor: hand;
  }

  .#{$prefix}item-disabled {
    .#{$prefix}trigger-noedit, .#{$prefix}form-trigger {
      cursor: auto;
    }
  }


  .#{$prefix}form-clear-trigger {
    background-image: theme-background-image($theme-name, 'form/clear-trigger.gif');
  }
  .#{$prefix}form-search-trigger {
    background-image: theme-background-image($theme-name, 'form/search-trigger.gif');
  }

  @if $include-ie {
    // in IE6 quirks, the table cell enclosing the trigger field's input element does not shrink to fit,
    // so it is necessary to set the height of the table cell.
    .#{$prefix}quirks .#{prefix}ie6 {
      .#{$prefix}form-trigger-input-cell {
        height: $form-field-height;
      }

      .#{$prefix}field-default-toolbar .#{$prefix}form-trigger-input-cell {
        height: $form-toolbar-field-height;
      }
    }
  }
}
